<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>自助点餐</title>
  <!-- Bootstrap -->
  <link href="../assets/css/mui.min.css" rel="stylesheet">
  <link href="fonts/iconfont.css" rel="stylesheet">
  <link href="../assets/css/style.css" rel="stylesheet" />
  <link href="../assets/css/buffetmeal_content.css" rel="stylesheet" />
</head>
<style type="text/css">
  .caiitem {
    height: 71px;
    border-bottom: 1px solid #F4F4F4;
    padding: 10px 0;
    position: relative;
    margin-left: 15px;
  }

  .caipin-content {
    background-color: #FFFFFF;
    margin-left: 83px;
    min-height: 100%;
  }

  .caiimg-pic {
    height: 51px;
    width: 51px;
    border-radius: 2.5px;
  }

  .caiimg {
    float: left;
  }

  .caixq {
    float: left;
    margin-left: 10px;
    font-size: 15px;
  }

  .caixq-title {
    font-size: 17px;
  }

  .caixq-xq {
    margin-top: 13px;
  }

  .caixq-price {
    font-size: 20px;
    color: #FC5252;
  }

  .caixq-fen {
    position: absolute;
    right: 10px;
    bottom: 7px;
  }

  .caipin-sidebar {
    position: fixed;
    left: 0;
    top: 44px;
    background-color: #f8f8f8;
    text-align: center;
    width: 83px;
  }

  .caipin-sidebar-item {
    height: 60px;
    border-bottom: 1px dashed #dadada;
    vertical-align: middle;
    padding: 0 10px;
    line-height: 60px;
  }
  .caipin-sidebar-active {
    background-color: #FFFFFF;
    border-left: 3px solid #FC5252;
  }

  .classify-title {
    height: 30px;
    line-height: 30px;
    color: #999999;
    font-size: 14px;
    background-color: #f8f8f8;
    padding-left: 15px;
  }
  /*弹框css开始*/
  .dialog_content{
    position: fixed;
    width: 300px;
    height: 190px;
    top: 50%;
    margin-top: -95px;
    left: 50%;
    margin-left: -150px;
    text-align: center;
    border: 1px solid #15141c;
    background-color: #fff;
    z-index: 23
  }
  .dialog_content p{
    text-align: center;
    line-height: 34px;
    margin-bottom: 0px;
  }
  .dialog_content_foot{
    width: 86%;
    margin-left: 7%;
    line-height: 40px;
    font-size: 16px;
    color: white;
    background-color: #E66B18
  }
  .cover{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: black;
    opacity: 0.6;
    z-index: 21;
  }
  .hide{
    display: none;
  }
  .dialog_content_close{
   position: absolute;
   width: 20px;
   height: 20px;
   right: -10px;
   top: -10px;
   background-color: #15141c;
   border-radius: 50%;
   color: #fff;
   line-height: 20px;
 }
</style>

<body>
  <header id="header" class="mui-bar mui-bar-nav">
    <h1 class="mui-title">自助点餐</h1>
    <button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
      <span class="mui-icon mui-icon-left-nav"></span>返回</button>
      <a class="mui-pull-right headerright"><i class="icon iconfont icon-gengduo"></i></a>
    </header>
    <div class="mui-content">
      <div class="caipin-sidebar" id="nav">
        <div class="caipin-sidebar-item caipin-sidebar-active" data-to="classify-one">
          热销
        </div>
        <div class="caipin-sidebar-item" data-to="classify-two">
          主食
        </div>
        <div class="caipin-sidebar-item" data-to="classify-third">
          热菜
        </div>
        <div class="caipin-sidebar-item" data-to="classify-four">
          汤羹
        </div>
      </div>
      <div class="caipin-content">
        <div id="classify-one">
          <div class="classify-title">
            热销
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">大丰收</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">大丰收</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">大丰收</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">大丰收</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">大丰收</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
        </div>
        <div id="classify-two">
          <div class="classify-title">
            主食
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">披萨</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">披萨</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">披萨</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">披萨</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">披萨</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
        </div>
        <div id="classify-third">
          <div class="classify-title">
            热菜
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">糖醋里脊</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">糖醋里脊</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">糖醋里脊</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">糖醋里脊</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">糖醋里脊</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
        </div>
        <div id="classify-four">
          <div class="classify-title">
            汤羹
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">疙瘩汤</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">疙瘩汤</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">疙瘩汤</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">疙瘩汤</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
          <div class="caiitem">
            <div class="caiimg">
              <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="caiimg-pic">
            </div>
            <div class="caixq">
              <div class="caixq-title">疙瘩汤</div>
              <div class="caixq-xq">
                <span class="caixq-price">￥12</span>
                <span class="caixq-fen">
                  <img src="../assets/images/jian.png" class="caija-pic caipinjian">
                  <span class="caifen-num">0</span>
                  <img src="../assets/images/jia.png" class="caija-pic caipinjia">
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 60px;"></div>
      <div class="yongcantotal-footer">
        <span class="mui-pull-left footer-total">
          <span class="totaltitle">购物车</span>
          <span class="total-priceprice">￥48</span>
        </span>
        <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined mui-pull-right pay-btn">选好了</button>
      </div>
    </div>


    <!-- 弹框 -->
    <div class="cover"></div>
    <div class="dialog_content">
      <div class="dialog_content_close">x</div>
      <div class="dialog_content_head">
        <p>亲爱的的王瑶</p>
        <p>您可尊享本店1级会员优惠特权</p>
        <p>每消费满200元,减4元</p>
        <p>祝您用餐愉快</p>
      </div>
      <div class="dialog_content_foot">马上点菜</div>
    </div>

    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/mui.js"></script>
    <script type="text/javascript">
      //添加菜数
      $('.caipinjia').on('click', function() {
        var number = $(this).siblings('.caifen-num').text();
        if(number >= 0) {
          number++
        }
        $(this).siblings('.caifen-num').text(number)
      })
      $('.caipinjian').on('click', function() {
        var number = $(this).siblings('.caifen-num').text();
        if(number >= 1) {
          number--
        }
        $(this).siblings('.caifen-num').text(number)
      })
      //滚动监听效果
      $('#nav div').on('click', function (e) {
        if($(this).hasClass('caipin-sidebar-active')){
          // no dothing
        }else{
          $(this).addClass('caipin-sidebar-active')
          $(this).siblings().removeClass('caipin-sidebar-active')
        }
        var target = e.target
        var id = $(target).data('to')
        $('body,html').animate({scrollTop: $('#' + id).offset().top- 44 +"px"}, 700)
      })

      // 弹出框消失
      $('.cover').on('click',function(){
        $(this).addClass('hide')
        $('.dialog_content').addClass('hide')
      })
      $('.dialog_content_foot').on('click',function(){
        $(this).parent('.dialog_content').addClass('hide')
        $('.cover').addClass('hide')
      })
      $('.dialog_content_close').on('click',function(){
        $(this).parent('.dialog_content').addClass('hide')
        $('.cover').addClass('hide')
      })
      
      
    </script>
  </body>

  </html>